/*
 * @Author: NtyAaron
 * @Date: 2021-04-10 16:12:38
 * @LastEditors: NtyAaron
 * @LastEditTime: 2021-06-01 12:12:39
 * @Description: file content
 * @FilePath: \miniapp\dwq\pages\weatherForecast\weatherForecast.less
 */
 page{
   width: 100%;
   height: 100%;
 }
.container{
  width: 100%;
  height: 100%;
  // background-color:#1e90ff;
  background:linear-gradient(-45deg,#76c3f0,#f15a97,#3dd6c7,#58e964);
  animation: move 6s ease infinite;
  background-size: 400%;
  .container-header{
    padding-top: 32rpx;
    .container-header-location{
      width: 250rpx;
      padding:12rpx 28rpx ;
      margin-bottom:32rpx ;
      margin-left: 32rpx;
      background-color: rgba(255, 255, 255, 0.8);
      color: #13A7B5;
      box-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.16);
      border-radius: 35rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .location-icon{
        width: 24rpx;
        height: 30rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .select-icon{
        width: 12rpx;
        height: 8rpx;
        display: flex;
        align-items: center;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
    .container-header-now-weather{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 32rpx;
      background-color: rgba(255, 255, 255, 0.65);
      padding: 50rpx 80rpx;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      border-radius: 24rpx;
      margin-bottom: 32rpx;
      .now-weather-info{
        .nowtemperature{
          color: #A6ADBF;
          font-size: 26rpx;
          line-height: 37rpx;
        }
        .degrees{
          color: #1A1D26;
          font-size: 94rpx;
          line-height: 132rpx;
          font-weight: Heavy;
        }
      }
      .status-icon{
        // height: 136rpx;
        display:flex;
        align-items: center;
        justify-content: center;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .container-main{
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 24rpx;
    padding: 40rpx 0;
    margin: 0 32rpx;
    .container-main-future-weather{
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 37rpx;
      color: #1A1D26;
      .future-weather-list{
        // display: flex;
        // justify-content: space-between;
        .future-weather-list-item{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 30rpx;
          .time{
            // padding-bottom: 43rpx;
          }
          .future-weather-icon{
            width: 65rpx;
            height: 65rpx;
            image{
              width: 100%;
              height: 100%;
            }
          }
          .info{
            padding: 43rpx 0;
          }
          .degrees{
            font-size: 24rpx;
            color:#A6ADBF ;
            line-height: 33rpx;
          }
        }
      }
    }
  }
}
.cityInfo{
  font-size: 26rpx;
  padding: 12rpx 28rpx;
  // display: flex;
  text-align: center;
  
}

@keyframes move{
0%{
  background-position: 0% 50%;
}
50%{
  background-position: 90% 50%;
}
0%{
  background-position: 0% 50%;
}
}